<template>
  <div>
      <!-- <div  v-if="pageState.yuYan_Load==false && $route.path === '/Rehearsal'"  class="RehearsalRiskLegend">
        <div class="btn-row">
          <div class="anchor">
            <div class="slot">
            <template>
              <div class="btnNew" :class="pageState.yubaoFenXi_YMFW? 'activeNew' : ''" @click="change_HS_YMFW"> 淹没范围 </div>
              <div class="btnNew" :class="pageState.yubaoFenXi_FXD? 'activeNew' : ''" @click="changeFXD">风险点 </div>
            </template>
          </div>  
          </div>
        </div>
      </div> -->
      <div v-show="$route.meta.title != '预警-预警统计'" class="RightBtnGroup">
      <div class="btn-row">
        <div class="anchor" :class="{'fxdbtn':$route.path === '/prediction/ShortPro/index'} ">
          <div class="slot">
            <!--          <div class="btn" @click="changeYB_SC_Ladar">淹没范围</div>-->
            <!--          <div class="btn" @click="changeYB_SC_Ladar">风险点</div>-->
            <template v-if="$route.path==='/prediction/Measured'">
              <template v-if="pageState.YB.indexOf('SC') !=-1">
                <!-- <div class="btnNew" :class="pageState.YB_SC_ZD? 'activeNew' : ''" @click="changeYB_SC_SC">测站</div> -->
                <!-- <div class="btn" :class="pageState.YB.indexOf('SC_LD') !=-1? 'active' : ''" @click="changeYB_SC_Ladar_Group">雷达</div>
                <div v-if="pageState.YB.indexOf('SC_LD') !=-1" class="ladarGroup">
                  <div class="btn" :class="pageState.YB==='SC_LD_MESH'? 'active' : ''" @click="changeYB_SC_Ladar_Mesh">雷达降雨</div>
                  <div class="btn" :class="pageState.YB==='SC_LD_MESH_PRO'? 'active' : ''" @click="changeYB_SC_Ladar_Mesh_PRO">降雨过程</div>
                  <div class="btn" :class="pageState.YB==='SC_LD_FSL_JD'? 'active' : ''" @click="changeYB_SC_Ladar_JDFSL">金堆反射率</div>
                  <div class="btn" :class="pageState.YB==='SC_LD_FSL_LT'? 'active' : ''" @click="changeYB_SC_Ladar_LTFSL">蓝田反射率</div>
                
                </div> -->
              </template>
              <!-- <template v-if="pageState.YB.indexOf('YB_') !=-1">
                <div class="btnNew" :class="{'activeNew' : pageState.YB==='YB_YB','dis':!isShowYBYB}" @click="changeYB_YB_YB">气象预报</div>
                <div class="btnNew" :class="{'activeNew' : pageState.YB==='YB_LD_MESH','dis':!isShowYBLD}" @click="changeYB_YB_Ladar_Mesh">雷达预报</div>
              </template> -->
            </template>
            <template  v-if="$route.path === '/prediction/ShortPro/index' ">
              <div class="btnNew" :class="pageState.yubaoFenXi_YMFW? 'activeNew' : ''" @click="change_HS_YMFW">
                淹没范围
              </div>
              <div class="btnNew" :class="pageState.yubaoFenXi_FXD? 'activeNew' : ''" @click="changeFXD">风险点
              </div>
            </template>
            <template v-if="pageState.YJ.indexOf('QX_')!==-1 && $route.path === '/earlyWarning/EarlyWarningInfo/index'">
              <div class="btnNew" :class="pageState.YJ==='QX_YB'? 'activeNew' : ''" @click="changeYJYB">
                预报降雨
              </div>
              <div class="btnNew" :class="pageState.YJ==='QX_FW'? 'activeNew' : ''" @click="changeYJFW">
                风险范围
              </div>
              <div class="btnNew" :class="pageState.YJ==='QX_ZQ'? 'activeNew' : ''" @click="changeYJZQ">
                风险政区
              </div>
            </template>
          </div>
        </div>
        <div class="mapTool">
        <template>
          <span class="mapToolbtn m-l-10" :class="{'mapToolbtnact':layer}" @click="showLayer">
            <i class="mapTooli1"></i>
            <span>图层</span>
            <i class="mapTooli2"></i>
          </span>
          <span class="mapToolbtn " :class="{'mapToolbtnact':drawTool}" @click="showTool">
            <i class="mapTooli3"></i>
            <span>工具</span>
            <i class="mapTooli4"></i>
          </span>

          <!-- <img v-if="layer" src="../../assets/map/btn-layer-l-active.png" alt="" @click="showLayer">
          <img v-if="!layer" src="../../assets/map/btn-layer-l.png" alt="" @click="showLayer">
      
          <img v-if="drawTool" class="m-l-10" src="../../assets/map/btn-tool-l-active.png" alt="" @click="showTool">
          <img v-if="!drawTool" class="m-l-10" src="../../assets/map/btn-tool-l.png" alt="" @click="showTool"> -->
        </template>
        </div>
      </div>
      <div class="content" :class="{'contentfixdv':layer,'contentfixdv1':drawTool}  ">
        <LayerCtrl v-show="layer" />
        <DrawTool v-show="drawTool" />
      </div>
    </div>
  </div>
  
</template>
<script>
import LayerCtrl from './LayerCtrl'
import DrawTool from './DrawTool'

export default {
    name: 'RightBtnGroup',
    components: {
        LayerCtrl,
        DrawTool
    },
    data() {
        return {
            layer: false,
            drawTool: false,
            isShowYBLD: true,
            isShowYBYB: true
        }
    },
    computed: {
        pageState() {
            return this.$store.getters.pageState
        }
    },
    created() {
        this.$store.getters.pageState.yubaoFenXi_FXD = true
        // 监听tabchange事件
        this.$eventBus.$on('EB_YB_LD_dis', res => {
            this.isShowYBLD = res
            if (!res) {
                this.pageState.YB = 'YB_YB'
            }
        })
        this.$eventBus.$on('EB_YB_YB_dis', res => {
            this.isShowYBYB = res
            if (!res) {
                if (this.pageState.YB === 'YB_YB') { this.changeYB_YB_Ladar_Mesh() }
            }
        })
    },
    // 生命周期-销毁
    destroyed() {
    },
    methods: {
        showLayer() {
            this.layer = !this.layer
            this.drawTool = false
        },
        showTool() {
            this.drawTool = !this.drawTool
            this.layer = false
        },
        changeYB_SC_SC() {
            this.pageState.YB_SC_ZD = !this.pageState.YB_SC_ZD
            this.$eventBus.$emit('EB_YB_SCJY', this.pageState.YB_SC_ZD)

            // this.$eventBus.$emit('EB_YB_Ladar', '')
        },
        changeYB_SC_Ladar_Group() {
            var show = this.pageState.YB.indexOf('SC_LD') !== -1
            this.pageState.YB = show ? 'SC' : 'SC_LD'
            if (show) {
                this.$eventBus.$emit('EB_YB_Ladar', '')
            }
            // this.$eventBus.$emit('EB_YB_SCJY', false)
        },
        changeYB_SC_Ladar_Mesh() {
            this.pageState.YB = this.pageState.YB === 'SC_LD_MESH' ? 'SC_LD' : 'SC_LD_MESH'
            this.$eventBus.$emit('EB_YB_Ladar', this.pageState.YB === 'SC_LD_MESH' ? 'SC_LD_MESH' : '')
        },
        changeYB_SC_Ladar_Mesh_PRO() {
            this.pageState.YB = this.pageState.YB === 'SC_LD_MESH_PRO' ? 'SC_LD' : 'SC_LD_MESH_PRO'
            this.$eventBus.$emit('EB_YB_Ladar', this.pageState.YB === 'SC_LD_MESH_PRO' ? 'SC_LD_MESH_PRO' : '')
        },
        changeYB_SC_Ladar_JDFSL() {
            this.show_YB_SC_Ladar_JDFSL = !this.show_YB_SC_Ladar_JDFSL
            this.pageState.YB = this.pageState.YB === 'SC_LD_FSL_JD' ? 'SC_LD' : 'SC_LD_FSL_JD'
            this.$eventBus.$emit('EB_YB_Ladar', this.pageState.YB === 'SC_LD_FSL_JD' ? 'SC_LD_FSL_JD' : '')
        },
        changeYB_SC_Ladar_LTFSL() {
            this.pageState.YB = this.pageState.YB === 'SC_LD_FSL_LT' ? 'SC_LD' : 'SC_LD_FSL_LT'
            this.$eventBus.$emit('EB_YB_Ladar', this.pageState.YB === 'SC_LD_FSL_LT' ? 'SC_LD_FSL_LT' : '')
        },
        // 金锥状态
        changeYB_SC_Ladar_JZZT() {
            this.pageState.YB = 'SC_LD_JZZT'
            const hrefs = 'https://www.baidu.com/?tn=62095104_25_oem_dg&ch=4'// 换成提供的金锥路径
            window.open(hrefs, '_blank')
        },
        changeYB_YB_YB() {
            this.pageState.YB = this.pageState.YB === 'YB_YB' ? 'YB_' : 'YB_YB'
            this.$eventBus.$emit('EB_YB_MESH', this.pageState.YB === 'YB_YB')

            this.$eventBus.$emit('EB_YB_Ladar', '')
        },
        changeYB_YB_Ladar_Mesh() {
            this.pageState.YB = this.pageState.YB === 'YB_LD_MESH' ? 'YB_' : 'YB_LD_MESH'
            this.$eventBus.$emit('EB_YB_Ladar', this.pageState.YB === 'YB_LD_MESH' ? 'YB_LD_MESH' : '')

            this.$eventBus.$emit('EB_YB_MESH', false)
        },

        change_HS_YMFW() {
            this.pageState.yubaoFenXi_YMFW = !this.pageState.yubaoFenXi_YMFW
            this.$eventBus.$emit('EB_HS_BTN_YMFW', this.pageState.yubaoFenXi_YMFW)
            
        },
        changeFXD() {
            this.pageState.yubaoFenXi_FXD = !this.pageState.yubaoFenXi_FXD
            this.$eventBus.$emit('EB_HS_BTN_YXD', this.pageState.yubaoFenXi_FXD)
            
        },
        // 预报降雨
        changeYJYB() {
            this.pageState.YJ = this.pageState.YJ === 'QX_YB' ? 'QX_' : 'QX_YB'
            this.$eventBus.$emit('EB_YB_MESH', this.pageState.YJ === 'QX_YB')

            this.$eventBus.$emit('EB_YJ_QX_BTN_FW', false)
            this.$eventBus.$emit('EB_YJ_QX_BTN_ZQ', false)
        },
        // 风险范围
        changeYJFW() {
            this.pageState.YJ = this.pageState.YJ === 'QX_FW' ? 'QX_' : 'QX_FW'
            this.$eventBus.$emit('EB_YJ_QX_BTN_FW', this.pageState.YJ === 'QX_FW')
            this.$eventBus.$emit('EB_YB_MESH', false)
            this.$eventBus.$emit('EB_YJ_QX_BTN_ZQ', false)
        },

        // 风险政区
        changeYJZQ() {
            this.pageState.YJ = this.pageState.YJ === 'QX_ZQ' ? 'QX_' : 'QX_ZQ'
            this.$eventBus.$emit('EB_YJ_QX_BTN_ZQ', this.pageState.YJ === 'QX_ZQ')

            this.$eventBus.$emit('EB_YB_MESH', false)
            this.$eventBus.$emit('EB_YJ_QX_BTN_FW', false)
        }
    }
}
</script>

<style scoped lang="scss">
    .RightBtnGroup {
        position: absolute;
        top: 95px;
        right: 0px;
        z-index: 88;
        min-width:300px;

        .anchor {
            // width: 0px;
            // position: absolute;
            // left: -10px;

            .slot {
                
                display: flex;
                justify-content: flex-end;
                align-items: center;
                background: rgba(14, 81, 133, 0.61);;
                // padding: 5px;
                .btn {
                    position: relative;
                    white-space: nowrap;
                    width: 100px;
                    height: 36px;
                    padding: 5px 10px;
                    background: rgba(14, 81, 133, 0.61);
                    border: 1px solid #0e5185;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    &:hover, &.active {
                        box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
                    }
                }
                 .btnNew{
                   width: 100px;
                   height: 36px;
                  
                   text-align: center;
                   font-family: "MePangMenZhengDao";
                   letter-spacing: 2px;
                   font-size: 18px;
                   color:#fff;
                   background:url('~@/assets/imgNew/btnbg.png') no-repeat;
                   background-size: 100% 100%;
                   margin-left:10px;
                   padding-top: 11px;
                   cursor: pointer;
                }
                .active {
                    border: 1px solid #007272;
                    box-shadow: inset 0px 0px 15px 0px #007272;
                }
                .activeNew{
                   background:url('~@/assets/imgNew/btnactbg.png') no-repeat;
                   background-size: 100% 100%;
                }
                .dis {
                  background: rgba(112, 112, 112, 0.61);
                  pointer-events: none;
                  /*border: 1px solid #F88;*/
                  cursor: no-drop;
                  color: #8b8b8b;
                  border: 1px solid #707070;
                  /*cursor:not-allowed*/
                  /*border: 1px solid #007272;*/
                  /*box-shadow: inset 0px 0px 15px 0px #007272;*/
                }
                .ladarGroup{
                  position: absolute;
                  right: 0;
                  top: 35px;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                }
            }
        }

        .btn-row {
            display: flex;
            align-items: center;
            justify-content: end;
            // background: rgba(14, 81, 133, 0.61);
            padding: 5px 10px;

            img {
                width: 67px;
                height: 39px;

            }

        }

        .content {
            position: relative;
            height: auto;
            background: rgba(0,46,131,0.75);
           
        }
        .contentfixdv{
          position: fixed;
          width:233px;
          top: 60px;
          right: 23px;
        }
        .contentfixdv1{
          position: fixed;
          width:233px;
          top: 60px;
          right: 23px;
          
        }
    }
    .RehearsalRiskLegend {
        position: absolute;
        top: 95px;
        right: 1000px;
        z-index: 2;
        //min-width:300px;

        .anchor {
            // width: 0px;
            // position: absolute;
            // left: -10px;

            .slot {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                background: rgba(14, 81, 133, 0.61);;
                // padding: 5px;
                 .btnNew{
                   width: 100px;
                   height: 36px;
                  
                   text-align: center;
                   font-family: "MePangMenZhengDao";
                   letter-spacing: 2px;
                   font-size: 18px;
                   color:#fff;
                   background:url('~@/assets/imgNew/btnbg.png') no-repeat;
                   background-size: 100% 100%;
                   margin-bottom:10px;
                   padding-top: 11px;

                }
                .active {
                    border: 1px solid #007272;
                    box-shadow: inset 0px 0px 15px 0px #007272;
                }
                .activeNew{
                   background:url('~@/assets/imgNew/btnactbg.png') no-repeat;
                   background-size: 100% 100%;
                }
                .dis {
                  background: rgba(112, 112, 112, 0.61);
                  pointer-events: none;
                  /*border: 1px solid #F88;*/
                  cursor: no-drop;
                  color: #8b8b8b;
                  border: 1px solid #707070;
                  /*cursor:not-allowed*/
                  /*border: 1px solid #007272;*/
                  /*box-shadow: inset 0px 0px 15px 0px #007272;*/
                }
                .ladarGroup{
                  position: absolute;
                  right: 0;
                  top: 35px;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                }
            }
        }

        .btn-row {
            display: flex;
            align-items: center;
            justify-content: center;
            // background: rgba(14, 81, 133, 0.61);
            padding: 5px 10px;

            img {
                width: 67px;
                height: 39px;

            }

        }

        .content {
            position: relative;
            height: auto;
            background: rgba(0,46,131,0.75);
           
        }
        .contentfixdv{
          position: fixed;
          width:233px;
          top: 60px;
          right: 23px;
        }
        .contentfixdv1{
          position: fixed;
          width:233px;
          top: 60px;
          right: 23px;
          
        }
    }
    .fxdbtn{
      position: fixed;
      top: 17px;
      right: 275px;
    }
    .mapTool{
      width:240px;
      height:46px;
      background:url('~@/assets/imgNew/kuang.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: fixed;
      top: 10px;
      right: 20px;
      .mapToolbtn{
        display: inline-block;
        width:40%;
        height:24px;
        background: rgba(0,102,255,0.6);
        border: 1px solid #00D2FF;
        margin-right:10px;
        margin-top:11px;
        cursor: pointer;
        font-weight: 400;
        color: #FFFFFF;
      }
      .mapTooli1{
        float: left;
        margin-left: 10px;
        margin-top: 5px;
        width:15px;
        height:15px;
        background: url("~@/assets/imgNew/tuceng.png") no-repeat;
        background-size: 100% 100%;
       
      }
       .mapTooli2, .mapTooli4{
        float: right;
        width:10px;
        height:6px;
        background: url("~@/assets/imgNew/ding3.png") no-repeat;
        background-size: 100% 100%;
        margin-left:7px;
        margin-top: 10px;
        margin-right: 6px;
      }
       .mapTooli3{
        float: left;
        margin-left: 10px;
        margin-top: 5px;
        width:15px;
        height:15px;
        margin-right:10px;
        background: url("~@/assets/imgNew/gongju.png") no-repeat;
        background-size: 100% 100%;
      }
      .mapToolbtnact{
        background: rgba(0,198,255,0.6);
        border: 1px solid #00D2FF;
         .mapTooli2, .mapTooli4{
            transform: rotateX(180deg);
            margin-top: 8px;
        }
      }

    }

    .isShowtopflg {
        .RightBtnGroup {
            top: 60px;
           // top: 75px;
        }
    }
</style>
